<template>
    <div>
       
        <BaseC MSG="hello,world" @changeTitle="ChangeTitle"></BaseC>
        <BaseD :data="count" @setCount="setCount"></BaseD>
        <BaseE ref="state"></BaseE>
        <button @click="copy">获取组件</button>
        <BaseF v-model="Mssage"></BaseF>
        {{ Mssage }}
    </div>
</template>

<script setup>
import BaseC from "./components/BaseC.vue";
import BaseD from "./components/BaseD.vue";
import BaseE from "./components/BaseE.vue";
import BaseF from "./components/BaseF.vue";
import { ref } from "vue";
const count=ref(0)
const state=ref(null)
const Mssage=ref('hello')
const ChangeTitle=(title)=>{
    console.log(title);
}
const setCount=()=>{
    count.value++
}
const copy=()=>{
    console.log(state.value.count);
    state.value.sayHello()
}
</script>
<script>
export default {
    name: "HelloWorld",
}
</script>

<style>

</style>